<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="">
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jquery.lazyload.js"></script>
    <!--[if lt IE 9]>
        <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <!-- header -->
    <div id="header" class="f-cb">
        <div class="logo fl">
            <a href="#">
                <img src="./image/logo.png" alt="" width="180">
            </a>
        </div>
        <ul class="main-menu fr">
            <li class="dropdown active">
                <a href="#">首页</a>
            </li>
            <li class="dropdown">
                <a href="#">
                    成功案例
                    <i class="iconfont">&#xe638;</i>
                </a>
                <ul class="subnav sub-directory">
                    <li>
                        <a href="./case.html?type=0">汉白玉石狮</a>
                    </li>
                    <li>
                        <a href="./case.html?type=1">汉白玉栏杆</a>
                    </li>
                    <li>
                        <a href="./case.html?type=2">汉白玉浮雕</a>
                    </li>
                    <li>
                        <a href="./case.html?type=3">人物雕塑</a>
                    </li>
                    <li>
                        <a href="./case.html?type=4">其他雕塑</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">
                    定制流程
                    <i class="iconfont">&#xe638;</i>
                </a>
                <ul class="subnav sub-directory">
                    <li>
                        <a href="./design.html">免费设计</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">
                    关于我们
                    <i class="iconfont">&#xe638;</i>
                </a>
                <ul class="subnav sub-directory">
                    <li>
                        <a href="./aboutUs_culture.html">企业文化</a>
                    </li>
                    <li>
                        <a href="./aboutUs_factory.html">厂区展示</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#footer">联系我们</a>
            </li>
            <li class="dropdown">
                <a href="./news.html">
                    近期跟踪
                    <i class="iconfont">&#xe638;</i>
                </a>
            </li>
        </ul>
    </div>
    <div class="placeholder"></div>
    <!-- container -->
    <div class="index-container">
        <!-- banner -->
        <div class="banner">
            <div class="btn_l">
                <i class="iconfont">&#xe606;</i>
            </div>
            <div class="btn_r">
                <i class="iconfont">&#xe639;</i>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./image/banner0.jpg" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- listTab -->
        <ul class="listTab f-cb">
            <li>
                <a href="./design.html">
                    <div class="normal">
                        <i class="iconfont">&#xe65e;</i>
                        <h3>专业设计</h3>
                    </div>
                    <div class="active">
                        <img src="./image/index_tab_img1.jpg" alt="">
                    </div>
                </a>
            </li>
            <li>
                <a href="./design.html">
                    <div class="normal">
                        <i class="iconfont">&#xe658;</i>
                        <h3>定制流程</h3>
                    </div>
                    <div class="active">
                        <img src="./image/index_tab_img2.jpg" alt="">
                    </div>
                </a>
            </li>
            <li>
                <a href="./design.html">
                    <div class="normal">
                        <i class="iconfont">&#xe627;</i>
                        <h3>塑料加工</h3>
                    </div>
                    <div class="active">
                        <img src="./image/index_tab_img3.jpg" alt="">
                    </div>
                </a>
            </li>
            <li>
               <a href="./design.html">
                    <div class="normal">
                        <i class="iconfont">&#xe65d;</i>
                        <h3>安装施工</h3>
                    </div>
                    <div class="active">
                        <img src="./image/index_tab_img4.jpg" alt="">
                    </div>
               </a>
            </li>
        </ul>
        <!-- about us -->
        <div class="aboutUs w1300 f-cb">
            <div class="pic fl">
                <img src="./image/index_intro.jpg" alt="">
            </div>
            <div class="desc fr">
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;鑫利艺术雕塑隶属于北京鑫利文化艺术有限公司,始创于2011年，注册资金1000万，专注于城市、企业、商业、人物、不锈钢、园林、肖像等创意主题雕塑设计，鑫利艺术雕塑公司结合雕塑设计、生产、加工、运输、安装、售后等一体化服务以及艺术活动组织策划的全方位整体解决
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;鑫利艺术雕塑隶属于北京鑫利文化艺术有限公司,始创于2011年，注册资金1000万，专注于城市、企业、商业、人物、不锈钢、园林、肖像等创意主题雕塑设计，鑫利艺术雕塑公司结合雕塑设计、生产、加工、运输、安装、售后等一体化服务以及艺术活动组织策划的全方位整体解决
                </p>
            </div>
        </div>
        <!-- company case -->
        <div class="company-case w1300">
            <h2>鑫利石雕公司案例</h2>
            <ul class="f-cb">
            </ul>
        </div>
        <!-- 定制设计 -->
        <div class="design-content">
            <ul class="content_list f-cb">
                <li id="item_block_0" class="item_block wow">
                    <a href="#" class="item_box">
                        <div  class="item_img" target="_blank">
                            <img src="./image/mei-img.jpg" alt="梅" title="梅">
                            <div class="item_mask"></div>
                        </div>
                        <div class="item_wrapper f-cb">
                            <div class="item_info f-cb">
                                <p class="title">梅</p>
                                <p class="subtitle">探波傲雪，剪雪裁冰</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li id="item_block_0" class="item_block wow">
                    <a href="#" class="item_box">
                        <div  class="item_img" target="_blank">
                            <img src="./image/lan-img.jpg" alt="兰" title="兰">
                            <div class="item_mask"></div>
                        </div>
                        <div class="item_wrapper f-cb">
                            <div class="item_info f-cb">
                                <p class="title">兰</p>
                                <p class="subtitle">空谷幽放，孤芳自赏</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li id="item_block_0" class="item_block wow">
                    <a href="#" class="item_box">
                        <div  class="item_img" target="_blank">
                            <img src="./image/text-img.jpg" alt="定制设计" title="定制设计">
                            <div class="item_mask"></div>
                        </div>
                        <div class="item_wrapper f-cb">
                            <div class="item_info f-cb">
                                <p class="title">定制设计</p>
                                <p class="subtitle">定制专属，省时省事</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li id="item_block_0" class="item_block wow">
                    <a href="#" class="item_box">
                        <div  class="item_img" target="_blank">
                            <img src="./image/zhu-img.jpg" alt="竹" title="竹">
                            <div class="item_mask"></div>
                        </div>
                        <div class="item_wrapper f-cb">
                            <div class="item_info f-cb">
                                <p class="title">竹</p>
                                <p class="subtitle">筛风弄月，潇洒一生</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li id="item_block_0" class="item_block wow">
                    <a href="#" class="item_box">
                        <div  class="item_img" target="_blank">
                            <img src="./image/ju-img.jpg" alt="菊" title="菊">
                            <div class="item_mask"></div>
                        </div>
                        <div class="item_wrapper f-cb">
                            <div class="item_info f-cb">
                                <p class="title">菊</p>
                                <p class="subtitle">凌霜飘逸，特立独行</p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>

        </div>
        <!-- 产品案例 -->
        <div class="pro-case f-cb w1300">
            <ul class="container_category  f-cb fr">
                <li>
                    <a href="#" class="active">
                        <span>汉白玉石狮</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>汉白玉栏杆</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>汉白玉浮雕</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>人物雕塑</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>其他雕塑</span>
                    </a>
                </li>
            </ul>
            <div class="content_wrapper fl">
                <ul class="content_list f-cb">
                    <li class="item_block">
                        <a href="./caseDetail.html" class="item_box">
                            <div class="item_img">
                                <img alt="" class="lazy" data-original="./image/demo-img.jpg" >
                            </div>
                            <div class="item_wrapper">
                                <div class="item_info">
                                    <div class="text_wrap">
                                        <p class="ellipsis">
                                            河南省南阳汉白玉栏杆
                                        </p>
                                        <p class="ellipsis">
                                            名称：汉白玉栏杆 材料：汉白玉一二级料
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="nodata">暂无数据</div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div id="footer">
         <!-- codemodel-->
        <div class="codeModel">
            <div class="code">
                <img src="./image/code.png" alt="">
            </div>
        </div>
        <div class="footer-con w1300 f-cb">
            <ul class="fl">
                <h3>联系我们</h3>
                <li class="address">
                    地址：<span></span>
                </li>
                <li class="phone">
                    电话：<span></span>
                </li>
                <li>
                    E-mail: <span class="email"></span> QQ：<span class="qq"></span>
                </li>
                <li>
                    网址：http://www.bxxlsd.com
                </li>
            </ul>
            <ul class="contact fl">
                <h3>关注我们</h3>
                <ul class="icons f-cb">
                    <li>
                        <a href="//weibo.com/u/3541697272" target="_blank">
                            <i class="iconfont">&#xe67a;</i>
                        </a>
                    </li>
                    <li>
                        <a  class="openQQ">
                            <i class="iconfont">&#xe600;</i>
                        </a>
                    </li>
                    <li class="wexin">
                        <i class="iconfont">&#xe63f;</i>
                    </li>
                </ul>
            </ul>
            <ul class="fl">
                <h3>联系鑫利石雕</h3>
                <div id="map">

                </div>
            </ul>
        </div>
        <div class="copyRight">
            版权所有Copyright©四川宝兴鑫利石雕厂 蜀ICP备16008598号-1 友情链接: <a href="#">汉白玉雕刻（石林轩）</a>
        </div>
    </div>
    <!-- side -->
    <div class="side">
        <ul>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon01.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon02.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li class="phone">
                <a href="#">
                    <div class="sidebox">
                        <img src="./image/side_icon03.png" alt="">
                        <span></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/common.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"></script>
    <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20181212032854"></script>
    <script>
        var index={
            url:'http://39.108.226.146',
            banner:'',
            type:0,
            pageSize:10,
            init(){
                this.getBanner();
                this.getCaseList();
                this.bind();
                this.getcase();
            },
            getcase(){
                var _this=this;
                $.ajax({
                    url:this.url+'/user/Case',
                    type:'get',
                    data:{type:'',pageSize:6},
                    success:function(res){
                        res=JSON.parse(res);
                        if(res.status==0){
                            var data=res.data;
                            var html="";
                            for(var i=0;i<data.length;i++){
                                html+="<li class='item-case'>"
                                html+=  "<a href='./caseDetail.html?id="+data[i]._id+"' class='case-img'>"
                                html+=  "<img class='lazy' data-original="+data[i].imgs[0].replace('../client','http://39.108.226.146/').replace('./','http://39.108.226.146/')+" >"
                                html+=  "<i class='iconfont'>&#xe643;</i>"
                                html+=  "</a>"
                                html+=   "<h4><a href='./caseDetail.html?id="+data[i]._id+"'>"+data[i].title+"</a></h4>"
                                html+="</li>"
                            }
                            $(".company-case ul").html(html);
                            $(".company-case img.lazy").lazyload({effect: "fadeIn"});
                        }
                    }
                })
            },
            getCaseList(){
                var _this=this;
                if(this.isload==true){
                    return;
                }
                this.isload=true;
                var _this=this;
                var name;
                switch(parseInt(this.type)){
                    case 0:
                        name='shishi';
                        break;
                    case 1:
                        name="langan";
                        break;
                    case 2:
                        name="fudiao";
                        break;
                    case 3:
                        name="renwu";
                        break;
                    case 4:
                        name="qita";
                        break;
                }
                $.ajax({
                    url:this.url+'/user/Case',
                    type:'get',
                    data:{type:name,pageSize:this.pageSize},
                    success:function(res){
                        _this.isload=false;
                        res=JSON.parse(res);
                        if(res.status==0){
                            if(res.data.length==0){
                                $(".nodata").show();
                                $(".pro-case .content_list").html("")
                            }else{
                                _this.joinHtml(res.data);
                                $(".nodata").hide();
                            }
                        }
                    }
                })
            },
            getBanner(){
                var _this=this;
                try{
                    this.banner=JSON.parse(window.sessionStorage.getItem('webMsg')).banner;
                    this.bannerHtml();
                }catch(err){
                    $.ajax({
                    url:this.url+'/user/WebInfo',
                    type:'get',
                    success:function(res){
                        var res=JSON.parse(res);
                        if(res.status==0){
                            _this.banner=res.data.banner;
                            _this.bannerHtml();
                        }
                    }
                })
                }
                
            },
            bind(){
                var _this=this;
                $(".container_category li").click(function(e){
                    if(_this.isload==true){
                        return;
                    }
                    e.preventDefault();
                   if(_this.type==$(this).index()){
                       return;
                   }
                    _this.type=$(this).index();
                    _this.getCaseList()
                })
            },
            bannerHtml(){
                var _html="";
                for(var i=0;i<this.banner.length;i++){
                    _html+="<div class='swiper-slide'><img src="+this.banner[i].replace('../','http://39.108.226.146/').replace('./','http://39.108.226.146/')+"></div>"
                }
                $(".banner .swiper-container .swiper-wrapper").append(_html);
                var _this=this
                _this.initSwiper();
            },
            joinHtml(data){
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<li class='item_block'>"
                    html+="<a href='./caseDetail.html?id="+data[i]._id+"'>"
                    html+=  "<div class='item_img'>"
                    html+=     "<img class='lazy' data-original="+data[i].imgs[0].replace('../client','http://39.108.226.146/').replace('./','http://39.108.226.146/')+" >"
                    html+=  "</div>"
                    html+=  "<div class='item_wrapper'>"
                    html+=     "<div class='item_info'><div class='text_wrap'><p class='ellipsis'>"+data[i].title+"</p><p class='ellipsis'>名称："+data[i].name+ "材料："+data[i].from+"</p></div></div>"
                    html+=  "</div>"
                    html+="</a>"
                    html+="</li>"
                }
                $(".pro-case .content_list").html(html)
                $("img.lazy").lazyload({effect: "fadeIn"});
            },
            initSwiper(){
                var bannerSwiper = new Swiper('.banner .swiper-container', {
                    loop: true,
                    autoplay: 3000,
                    speed: 1000,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    effect: 'left',
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    observer:true,
                    observeParents:true
                })
                $(".btn_l").click(function () {
                    bannerSwiper.slidePrev();
                })
                $(".btn_r").click(function () {
                    bannerSwiper.slideNext();
                })
            }
        }
    </script>
    <script>
        $(function () {
            $(".container_category li a").click(function(e){
                e.preventDefault();
                $(this).addClass('active').parents().siblings().find('a').removeClass('active');
            });
           
            $("img.lazy").lazyload();
            index.init();
        })
    </script>
</body>

</html>